<style type="text/css">
	#wp_google_drive_details_icon{position: fixed; background-color:#ffffff; display: none; height: 11px; line-height: 11px;}
	#wp_google_drive_details_content{position: fixed; background-color:#ffffff; display: none; font-size: 12px;}
	#wp_google_drive_details_content .titleDiv{font-weight: bold; font-size: 14px; margin: 10px; width: 100%; height: 17px;}
	#wp_google_drive_details_content .clearStyle{clear: both;}
	#wp_google_drive_details_content hr{height: 1px; border: 0; background-color: #F4F4F4;}
	#wp_google_drive_details_content td{padding-top: 5px;}
</style>
<div id='wp_google_drive_details_icon'>
	<img src="imgs/icons/communities_c_11_11.png">
</div>
<div id='wp_google_drive_details_content'>
	<div class="titleDiv">Detail</div>
	<hr>
	<div class="titleDiv">General Info</div>
	<table class='wp_ml_10'>
		<tr>
			<td>Type</td>
			<td>Image</td>
		</tr>
		<tr>
			<td>Dimensions</td>
			<td>120 * 120</td>
		</tr>
		<tr>
			<td>Size</td>
			<td>6KB</td>
		</tr>
		<tr>
			<td>Modified</td>
			<td>1:24 PM Mar 3</td>
		</tr>
		<tr>
			<td>Created</td>
			<td>1:24 PM Mar 3</td>
		</tr>
		<tr>
			<td>Opened by me</td>
			<td>1:24 PM Mar 3</td>
		</tr>
	</table>
	<div class="titleDiv">
		<div class="left">Description</div>
		<hr class='left wp_mt_10 wp_ml_10 wp_w_90' />
	</div>
	<div class='wp_ml_10'>Add a description</div>
	<div class="titleDiv clearStyle">
		<div class='left'>Sharing</div>
		<hr class='left wp_mt_10 wp_ml_10 wp_w_117' />
	</div>
	<div class='clearStyle wp_ml_10'>
		<div class='left'>Elle Yung</div>
		<div class='right wp_mr_10'>Owner</div>
	</div>
	<div class="titleDiv clearStyle">
		<div class='left'>Download Permission</div>
		<hr class='left wp_mt_10 wp_ml_10 wp_w_20' />
	</div>
	<div class='wp_ml_10'>Prevent viewers from downloading</div>
</div>
<script type="text/javascript">
	var googleDriveDetailsFun = function () {
		var contentElem = $("#wp_google_drive_details_content"), iconElem = $("#wp_google_drive_details_icon");
		return {
			showDetails: function (_options, _constent) {
				//_options = {elem: obj, winHeight: '', topOffset: 0, bottomOffset: 0}
				var left = $(_options.elem).position().left + $(_options.elem).width(), top = $(_options.elem).position().top, contentTop, picTop, detailHeight = contentElem.height(), picHeight = iconElem.height();
				top = top < _options.topOffset ? _options.topOffset : top + _options.topOffset;
				contentTop = top + detailHeight > _options.winHeight ? _options.winHeight - detailHeight + _options.bottomOffset : top;
				picTop = top + picHeight > _options.winHeight ? _options.winHeight - picHeight + _options.bottomOffset : top;
				
				iconElem.css({'top': picTop, 'left': left});
				contentElem.css({'top': contentTop, 'left': left + iconElem.width()});

				iconElem.show();
				contentElem.show();
			}
		}
	}();
</script>